<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-12 22:49:24
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-17 22:01:14
 * @FilePath: \vue3_admin_template\project\src\components\PublicMap\MapConteol.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-select
      v-model="selectType"
      placeholder="请选择地形"
      @change="baseMapsChange"
    >
      <el-option
        v-for="item in mapTypeOptions"
        :key="item.id"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
</template>

<script setup lang="ts">
import useMapStore from '@/store/modules/map'
import { onMounted, ref } from 'vue'
import { baseMapLayer } from '@/utils/MapConfig.ts'
import type { BaseMapType } from './type/type.ts'
let baseMapId: any = useMapStore().baseMapId
let map: any
onMounted(() => {
  map = useMapStore().map
})

const mapTypeOptions = ref<any>([
  {
    id: '0001',
    label: '影像',
    value: '影像',
  },
  { id: '0002', label: '经典', value: '经典' },
  { id: '0003', label: '地形', value: '地形' },
])
let selectType = ref('')
const baseMapsChange = (type: BaseMapType) => {
  console.log(type, map, baseMapId)
  //选到同样的底图了那就不操作
  if (map.getSource(baseMapLayer[type].map.source.id)) {
  } else {
    //选到别的底图了，先添加新的底图
    map.addSource(
      baseMapLayer[type].map.source.id,
      baseMapLayer[type].map.source.source,
    )
    map.addLayer(baseMapLayer[type].map.layer)
    map.addSource(
      baseMapLayer[type].note.source.id,
      baseMapLayer[type].note.source.source,
    )
    map.addLayer(baseMapLayer[type].note.layer)
    //移动新底图到旧底图前面，保证底图都是在最底层
    map.moveLayer(baseMapLayer[type].map.source.id, baseMapId.mapId)
    map.moveLayer(baseMapLayer[type].note.source.id, baseMapId.noteId)
    //移除旧底图
    map.removeLayer(baseMapId.mapId)
    map.removeLayer(baseMapId.noteId)
    map.removeSource(baseMapId.mapId)
    map.removeSource(baseMapId.noteId)
    baseMapId = {
      mapId: baseMapLayer[type].map.source.id,
      noteId: baseMapLayer[type].note.source.id,
    }
  }
}
</script>

<style lang="scss" scoped></style>
